<template>
  <view class="body">
    <img class="img-Bg" src="https://ainengli.hzjrsw.com/jkhx/weight/food-bg.png" alt="" />
    <view class="h1-title">智能膳食</view>
    <view class="h2-title">科学膳食&nbsp;&nbsp;智能护航</view>
    <view class="tip">
      <view class="tip-item">
        <img class="img-icon" src="https://ainengli.hzjrsw.com/jkhx/common/selected.png" alt="" />
        <text>每日食谱推荐</text>
      </view>
      <view class="tip-item">
        <img class="img-icon" src="https://ainengli.hzjrsw.com/jkhx/common/selected.png" alt="" />
        <text>量身定制方案</text>
      </view>
      <view class="tip-item">
        <img class="img-icon" src="https://ainengli.hzjrsw.com/jkhx/common/selected.png" alt="" />
        <text>营养均衡配置</text>
      </view>
    </view>
    <view v-for="(item, index) of contentList" :key="index" class="box">
      <view class="title">
        <view class="line" />
        <text>{{ item.title }}</text>
      </view>
      <view class="content">
        <text>
          {{ item.content }}
        </text>
      </view>
    </view>
    <view class="fixed">
      <button @tap="begin" class="fix-btn">开始体验</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'

const contentList = ref([
  {
    title: '智能膳食处方',
    content:
      '根据您的健康数据、体质、基础代谢率、营养需求等，精准制定个性化膳食处方，满足减重、专病、老人、小孩等不同人群的营养需求。'
  },
  {
    title: '智能分析饮食结构',
    content: '为您量身定制科学饮食结构，智能推荐每日能量、蛋白质、脂肪、碳水化合物量。'
  },
  {
    title: '智能识别功能',
    content: '1.拍照识别食物图片，精准识别食物能量、营养成分。\n2.扫描食品二维码，查看食物能量。'
  },
  {
    title: '能量预警',
    content: '根据您每日的基础代谢和所需热量，智能预警膳食平衡，帮助您科学管理身材。'
  },
  {
    title: '食物库',
    content: '丰富的食物食材库，帮助您更好了解食物营养成分，养成科学、健康饮食习惯。'
  },
  {
    title: '膳食报告',
    content: '阶段统计和追踪您的膳食情况，智能调整您的膳食方案，提供合理膳食，保持营养均衡。'
  }
])

const begin = () => {
  uni.redirectTo({ url: '/module/src/pages/food/smartFood/questionnaire' })
}
</script>

<style lang="scss" scoped>
.body {
  position: relative;
  height: 100%;
  padding: 34rpx 32rpx;
  padding-bottom: calc(144rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(144rpx + env(safe-area-inset-bottom));
  overflow: auto;

  .img-Bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 655rpx;
  }

  .h1-title {
    padding-top: 48rpx;
    margin-left: 16rpx;
    font-size: 56rpx;
    font-weight: 600;
    color: #222;
  }

  .h2-title {
    margin: 8rpx 16rpx 32rpx;
    font-size: 40rpx;
    font-weight: 600;
    color: #222;
  }

  .tip {
    display: flex;
    gap: 16rpx;
    align-items: center;
    justify-content: space-between;
    width: 522rpx;
    height: 44rpx;
    padding: 0 16rpx;
    margin-bottom: 64rpx;
    margin-left: 16rpx;
    background: rgb(255 255 255 / 50%);
    border-radius: 24rpx;

    .tip-item {
      display: flex;
      align-items: center;
      font-size: 20rpx;
      font-weight: 400;
      color: #666;

      .img-icon {
        width: 24rpx;
        height: 24rpx;
        margin-right: 8rpx;
      }
    }
  }

  .box {
    padding: 32rpx;
    margin-bottom: 32rpx;
    background: #fff;
    border-radius: 24rpx;

    .title {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 24rpx;
      font-size: 36rpx;
      font-weight: 700;
      color: #222;

      .line {
        width: 8rpx;
        height: 36rpx;
        margin-right: 16rpx;
        background: #00d1b6;
        border-radius: 0 8rpx;
      }
    }

    .content {
      padding: 24rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #222;
      text-align: justify;
      background: #fafafa;
      border-radius: 16rpx;
    }
  }

  .fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    box-sizing: border-box;
    display: flex;
    gap: 24rpx;
    justify-content: space-between;
    width: 100%;
    padding: 24rpx 32rpx;
    padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
    background: #fff;

    .fix-btn {
      width: 100%;
      font-size: 32rpx;
      font-weight: 700;
      color: #fff;
      background: #00d1b6;
      border-radius: 44rpx;
    }
  }
}
</style>
